computed 算出プロパティ
メソッドとの違い
算出プロパティはリアクティブな依存関係にもとづきキャッシュされる
例:何度random computedを呼び出しても同じ数値
監視プロパティは、命令的で冗長
code:computed.js
<template>
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
</template>
<scripte>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 算出 getter 関数
reversedMessage: function () {
// this は vm インスタンスを指します
return this.message.split('').reverse().join('')
}
}
})
</scropt>
算出setter関数
code:setter.js
// ...
computed: {
fullName: {
// getter 関数
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter 関数
set: function (newValue) {
var names = newValue.split(' ')
}
}
}
// ...
公式